<template>
  <div class="pageOut">
    <div class="pageIn">
      <el-form :inline="true" :model="formSearch" size="small">
        <el-form-item>
          <el-input
            v-model="formSearch.order_no"
            placeholder="搜索订单编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formSearch.namePhone"
            placeholder="请输入昵称或手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formSearch.order_status"
            clearable
            filterable
            placeholder="请选择订单状态"
            style="width: 250px"
          >
            <el-option label="未付款" value="10"></el-option>
            <el-option label="发货中/待取货" value="11"></el-option>
            <el-option label="运输中" value="12"></el-option>
            <el-option label="已完成" value="13"></el-option>
            <el-option label="已取消" value="14"></el-option>
            <el-option label="已退款" value="15"></el-option>
            <el-option label="已部分退款" value="16"></el-option>
            <el-option label="待评价" value="17"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formSearch.deliver_id"
            clearable
            filterable
            placeholder="请选择订单类型"
            style="width: 250px"
          >
            <el-option label="邮寄" value="1"></el-option>
            <el-option label="自取" value="2"></el-option>
            <el-option label="点位自购" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        border
        ref="table"
        :height="height - 170"
        :data="tableData"
        :header-cell-style="{ background: '#FAFAFA', color: '#606266' }"
        v-loading="loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        style="width: 100%"
      >
        <el-table-column type="index" width="70" label="序号"></el-table-column>

        <el-table-column
          prop="orderCode"
          label="订单编号"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="pickupName"
          label="订单类型"
          width="100"
        ></el-table-column>
        <el-table-column prop="stateName" label="订单状态" width="150">
        </el-table-column>
        <el-table-column
          prop="petName"
          label="购买人"
          width="100"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机号码"
          width="180"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>

        <el-table-column
          prop="goodsName"
          label="产品信息"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="consignee"
          label="收货人"
          width="100"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="receivePhone"
          label="收货人手机号"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="billAmount"
          label="应付金额"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="payAmount"
          label="实付金额"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="receiveAddress"
          label="用户地址"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="create_time"
          label="下单时间"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="deviceName"
          label="设备名"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="gridCode"
          label="格口号"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>

        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-link
              type="primary"
              v-if="
                scope.row.pickup == 1 && scope.row.state == 11 && permission.add
              "
              @click="daliogClick(scope.row, '1')"
              >发货</el-link
            >
            <el-link
              type="primary"
              v-if="
                scope.row.pickup != 3 &&
                scope.row.state == 10 &&
                permission.editPrice
              "
              @click="daliogClick(scope.row, '4')"
              >改价</el-link
            >
            <el-link
              type="primary"
              v-if="
                scope.row.pickup == 1 &&
                permission.runder &&
                (scope.row.state == 11 || scope.row.state == 12)
              "
              @click="daliogClick(scope.row, '2')"
              >退款</el-link
            >
            <el-link
              type="primary"
              @click="handleDel(scope.row.id)"
              v-if="scope.row.state == 10 && permission.del"
              >取消订单</el-link
            >
            <!-- <el-link  type="primary">退货</el-link> -->
            <el-link
              type="primary"
              @click="daliogClick(scope.row, '3')"
              v-if="permission.deali"
              >订单详情</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <el-dialog
        :title="type == '1' ? '发货' : '退款'"
        top="4vh"
        :visible.sync="visible"
        width="40%"
        @close="resetForm('ruleForm')"
      >
        <div class="cardcontent">
          <div class="content_list">
            <div class="news_title" v-if="currentRow.petName">
              <div class="goods_name">购买人</div>
              <div class="goods_number" style="display: flex">
                {{ currentRow.petName }}
              </div>
            </div>
            <div class="news_title">
              <div class="goods_name">手机号</div>
              <div class="goods_number" style="display: flex">
                {{ currentRow.phone }}
              </div>
            </div>
          </div>
          <div class="content_list">
            <div class="news_title">
              <div class="goods_name">订单号</div>
              <div class="goods_number" style="width: 80%">
                {{ currentRow.orderCode }}
              </div>
            </div>
            <div class="news_title">
              <div class="goods_name">下单时间</div>
              <div class="goods_number" style="width: 69%">
                {{ currentRow.create_time }}
              </div>
            </div>
          </div>

          <div class="content_list">
            <div class="news_title">
              <div class="goods_name">应付金额</div>
              <div class="goods_number">{{ currentRow.billAmount }}</div>
            </div>
            <div class="news_title">
              <div class="goods_name">实付金额</div>
              <div class="goods_number">{{ currentRow.payAmount }}</div>
            </div>
          </div>
          <div class="content_list">
            <div class="news_title">
              <div class="goods_name">付款方式</div>
              <div class="goods_number">{{ currentRow.paymentMethodName }}</div>
            </div>
            <div
              class="news_title"
              v-for="(item2, index2) in currentRow.payDetails"
              :key="index2"
            >
              <div class="goods_name">{{ item2.typeName }}</div>
              <div class="goods_number">{{ item2.payAmount }}</div>
            </div>
          </div>
          <div>
            <el-form
              v-if="type == '1'"
              :model="ruleForm"
              ref="ruleForm"
              label-width="90px"
              style="padding-top: 20px"
            >
              <div v-for="(item, index) in ruleForm.goods" :key="index">
                <div class="content_img">
                  <img
                    style="width: 60px; height: 60px"
                    :src="item.mainPicture"
                    alt=""
                  />
                  <div class="contImgText">
                    <span>{{ item.goodsName }}</span>
                    <span>{{ item.sellingPrice }}元</span>
                  </div>
                </div>

                <el-form-item label="快递单号">
                  <el-input
                    maxlength="20"
                    v-model="item.courierNumber"
                    style="width: 300px"
                    @input="inputs(index, item)"
                    :disabled="item.pickUpStatus == 4"
                    placeholder="请输入快递单号"
                    clearable
                  ></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>

        <el-form
          v-if="type == '2'"
          :model="ruleForm"
          ref="ruleForm"
          label-width="90px"
          style="padding-top: 20px"
        >
          <div
            style="margin-bottom: 30px"
            v-for="(item, index) in currentRow.goods"
            :key="index"
          >
            <div class="content_img">
              <img
                style="width: 60px; height: 60px"
                :src="item.mainPicture"
                alt=""
              />
              <div class="contImgText">
                <span>{{ item.goodsName }}</span>
                <span>{{ item.sellingPrice }}元</span>
              </div>
              <div style="margin-left: 50px">x {{ item.number }}</div>
            </div>
          </div>
          <el-form-item
            v-if="currentRow.state == 12"
            label="退款金额"
            prop="expressNumber"
            :rules="{
              required: true,
              message: '请输入退款金额',
              trigger: 'change',
            }"
          >
            <el-input
              v-model="ruleForm.expressNumber"
              style="width: 300px"
              oninput="this.value=this.value.replace(/[^\d]/g,'')"
              placeholder="请输入退款金额"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button
            v-if="type == '2' && currentRow.state == 11"
            @click="submitForm('ruleForm')"
            :loading="confirmLoading"
            type="primary"
            >全部退款结束订单</el-button
          >
          <el-button
            v-if="type == '2' && currentRow.state == 12"
            type="primary"
            @click="submitForm('ruleForm')"
            :loading="confirmLoading"
            >{{ confirmLoading ? "保存中..." : "部分退款" }}</el-button
          >
          <el-button
            v-if="type == '1'"
            type="primary"
            @click="submitForm('ruleForm')"
            :loading="confirmLoading"
            >{{ confirmLoading ? "保存中..." : "保 存" }}</el-button
          >
        </div>
      </el-dialog>

      <el-dialog
        title="订单详情"
        :visible.sync="visiblDetails"
        width="40%"
        top="3vh"
        @close="resetForm('ruleForm')"
      >
        <div class="cardcontent">
          <div class="content_list">
            <div class="news_title" v-if="currentRow.petName">
              <div class="goods_name">购买人</div>
              <div class="goods_number" style="display: flex">
                {{ currentRow.petName }}
              </div>
            </div>
            <div class="news_title">
              <div class="goods_name">手机号</div>
              <div class="goods_number" style="display: flex">
                {{ currentRow.phone }}
              </div>
            </div>
          </div>

          <div class="content_list">
            <div class="news_title">
              <div class="goods_name">订单号</div>
              <div class="goods_number" style="width: 80%">
                {{ currentRow.orderCode }}
              </div>
            </div>
            <div class="news_title">
              <div class="goods_name">下单时间</div>
              <div class="goods_number" style="width: 69%">
                {{ currentRow.create_time }}
              </div>
            </div>
          </div>

          <div class="content_list">
            <div class="news_title" v-if="currentRow.state != 14">
              <div class="goods_name">应付金额</div>
              <div class="goods_number">{{ currentRow.billAmount }}</div>
            </div>
            <div
              class="news_title"
              v-if="type != '4' && currentRow.state != 14"
            >
              <div class="goods_name">实付金额</div>
              <div class="goods_number">{{ currentRow.payAmount }}</div>
            </div>
          </div>
          <div
            class="content_list"
            v-if="type != '4' && currentRow.state != 14"
          >
            <div class="news_title">
              <div class="goods_name">付款方式</div>
              <div class="goods_number">{{ currentRow.paymentMethodName }}</div>
            </div>
            <div
              class="news_title"
              v-for="(item2, index2) in currentRow.payDetails"
              :key="index2"
            >
              <div class="goods_name">{{ item2.typeName }}</div>
              <div class="goods_number">{{ item2.payAmount }}</div>
            </div>
          </div>
          <div class="content_list">
            <div class="news_title">
              <div class="goods_name">取货方式</div>
              <div class="goods_number">{{ currentRow.pickupName }}</div>
            </div>
          </div>
          <el-form
            v-if="type == '4'"
            :model="ruleForm"
            ref="ruleForm"
            label-width="90px"
            style="padding-top: 20px"
          >
            <el-form-item
              label="应付金额"
              prop="expressNumber"
              :rules="{
                required: true,
                message: '请输入金额',
                trigger: 'change',
              }"
            >
              <el-input
                v-model="ruleForm.expressNumber"
                style="width: 300px"
                oninput="this.value=this.value.replace(/[^\d]/g,'')"
                placeholder="请输入金额"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          border
          ref="table"
          :data="currentRow.goods"
          :header-cell-style="{ background: '#FAFAFA', color: '#606266' }"
          v-loading="loading"
          element-loading-background="rgba(255, 255, 255, 0.5)"
          style="width: 100%"
        >
          <el-table-column prop="img" width="80" label="商品图">
            <template slot-scope="scope">
              <img
                style="width: 50px; height: 50px"
                :src="scope.row.mainPicture"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="goodsName"
            :show-overflow-tooltip="tooltip"
            label="商品名称"
          ></el-table-column>
          <el-table-column
            prop="sellingPrice"
            label="商品价格"
          ></el-table-column>
          <el-table-column
            v-if="currentRow.pickup == 2"
            prop="pickUpCode"
            label="取货码"
          ></el-table-column>
          <el-table-column
            v-if="currentRow.pickup == 1"
            prop="courierNumber"
            label="快递单号"
          ></el-table-column>
          <el-table-column
            prop="pickUpStatusName"
            label="状态"
          ></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visiblDetails = false">返 回</el-button>
          <el-button
            v-if="type == '4'"
            type="primary"
            @click="changePrice('ruleForm')"
            :loading="confirmLoading"
            >{{ confirmLoading ? "保存中..." : "保 存" }}</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  goodsOrder,
  MAIN,
  orderPurchaseInfo,
  deliverGoods,
  refundOrder,
  cancelOrder,
  changePrice,
  goodsOrderInfo,
} from "../../utils/api";

export default {
  name: "DeliverOrders",
  props: ["height"],

  data() {
    return {
      tableData: [{ id: 1, order_no: "424242d" }],
      ruleForm: {
        expressNumber: "",
        goods: [{ courierNumber: "" }],
      },
      permission: {
        runder: false,
        add: false,
        del: false,
        deali: false,
        editPrice: false,
      },
      agentId: "", // 代理商id
      type: "",
      orderTableData: [],
      orderId: "",
      confirmLoading: false,
      memberId: "",
      visiblDetails: false,
      tooltip: true, //内容过长被隐藏时显示 tooltip
      loading: true, //显示加载表格
      pageSize: 10, //每页多少条
      currentPage: 1, //当前第几页
      pageSizes: [10, 20, 30, 40, 50], //每页选择条数
      total: 0, //共多少条
      currentRow: {}, //当前行数据信息
      errImg: 'this.src="' + require("../../../static/img/user.png") + '"',
      formSearch: {
        order_no: "",
        order_status: "",
        deliver_id: "",
        namePhone: "",
      }, //搜索
      deliver: {}, //送菜员下拉
      visible: false,
      userInfo: {},
    };
  },

  mounted() {
    this.getData();
    const userinfo = JSON.parse(sessionStorage.getItem("userInfo")); //解密,获取用户登录信息
    this.userInfo = userinfo;
    let arr = userinfo.menu_id.split(",");
    // console.log(arr)
    // 退款 128
    // 详情 127
    // 取消订单 125
    // 发货 126
    // 改价 124
    if (arr.indexOf("128") > -1) {
      this.permission.runder = true;
    }
    if (arr.indexOf("127") > -1) {
      this.permission.deali = true;
    }

    if (arr.indexOf("126") > -1) {
      this.permission.add = true;
    }
    if (arr.indexOf("125") > -1) {
      this.permission.del = true;
    }
    if (arr.indexOf("124") > -1) {
      this.permission.editPrice = true;
    }
    console.log(this.permission);
    if (this.$route.query.agentId) {
      this.agentId = this.$route.query.agentId;
      this.getData();
    }
    if (this.$route.query.memberId) {
      this.memberId = this.$route.query.memberId;
      this.getData();
    }
  },
  methods: {
    inputs(index, item) {
      // return console.log(index, item);
      let as = /^[0-9A-Za-z]+$/;
      let flag = as.test(item.courierNumber);
      if (!flag) {
        this.ruleForm.goods[index].courierNumber = "";
        this.$notify.error("输入格式不正确");
      }
    },
    //取消订单
    handleDel(id) {
      let parm = {
        orderId: id,
        userId: this.userInfo.id,
      };
      this.$confirm("确认取消?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.postRequest(cancelOrder, parm, MAIN).then((res) => {
            if (res.code == 200) {
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
              });
              this.getData();
            }
          });
        })
        .catch(() => {});
    },
    daliogClick(row, type) {
      this.orderId = row.id;
      if (type == "2") {
        this.postRequest(orderPurchaseInfo, { orderId: row.id }, MAIN).then(
          (res) => {
            if (res.code === 200) {
              this.currentRow = res.data;

              this.ruleForm.goods = res.data.goods;
              // }
            }
          }
        );
      } else {
        this.postRequest(goodsOrderInfo, { orderId: row.id }, MAIN).then(
          (res) => {
            if (res.code === 200) {
              this.currentRow = res.data;

              this.ruleForm.goods = res.data.goods;
            }
          }
        );
      }

      if (type == "3" || type == "4") {
        this.visiblDetails = true;
      } else {
        this.visible = true;
      }
      this.type = type;
    },
    detailsClick(row) {
      this.visiblDetails = true;
    },
    //获取初始数据
    getData() {
      this.loading = true;
      let params = {
        orderCode: this.formSearch.order_no,
        state: this.formSearch.order_status,
        nameOrPhone: this.formSearch.namePhone,
        pickup: this.formSearch.deliver_id,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        agentId: this.agentId,
        memberId: this.memberId,
      };
      this.postRequest(goodsOrder, params, MAIN).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.loading = false;
          this.$nextTick(() => {
            //避免表格表头样式错乱
            if (this.$refs.table) this.$refs.table.doLayout();
          });
        }
      });
    },
    changePrice(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          let params = {
            orderId: this.orderId,
            userId: this.userInfo.id,
          };
          if (this.type === "4") {
            params.revisedAmount = this.ruleForm.expressNumber;
            this.postRequest(changePrice, params, MAIN).then((res) => {
              if (res.code === 200) {
                this.$notify.success(res.msg);
                this.getData();
                this.visiblDetails = false;
                this.confirmLoading = false;
              }
              this.confirmLoading = false;
            });
          }
        } else {
          return false;
        }
      });
    },

    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          let params = {
            orderId: this.orderId,
            userId: this.userInfo.id,
          };
          if (this.type === "1") {
            params.goods = this.ruleForm.goods;
            // console.log(params);
            this.postRequest(deliverGoods, params, MAIN).then((res) => {
              if (res.code === 200) {
                this.$notify.success(res.msg);
                this.getData();
                this.visible = false;
                this.confirmLoading = false;
              }
              this.confirmLoading = false;
            });
          }
          if (this.type === "2") {
            params.refundAmount = this.ruleForm.expressNumber;
            this.postRequest(refundOrder, params, MAIN).then((res) => {
              if (res.code === 200) {
                this.$notify.success(res.msg);
                this.getData();
                this.visible = false;
                this.confirmLoading = false;
              }
              this.confirmLoading = false;
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(ruleForm) {
      this.orderId = "";
      this.ruleForm = {
        expressNumber: "",
        goods: [{ courierNumber: "" }],
      };
      this.currentRow = {};
      this.type = "";
      // this.$refs[ruleForm].resetFields();
    },
    grantClick() {},
    //分页
    handleSizeChange(val) {
      //每页 ${val} 条
      this.pageSize = val;
      this.getData();
    },

    handleCurrentChange(val) {
      //当前页
      this.currentPage = val;
      this.getData();
    },

    //查询
    search() {
      this.getData();
    },
  },
};
</script>

<style scoped>
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff;
  color: #fff;
  cursor: pointer;
}
/deep/ .el-input--mini .el-input__inner {
  height: 32px;
  line-height: 32px;
}

.news_title {
  display: flex;
  padding-top: 27px;
  flex: 1;
}
.cardcontent {
  padding: 20px 20px;
  padding-top: 0px;
  opacity: 1;
  border-radius: 4px;
}
.content_list {
  display: flex;
  justify-content: space-between;
}
.goods_list {
  padding: 20px 20px 30px 20px;
}

.goods_name {
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: rgba(62, 63, 66, 1);
}
.goods_number {
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: rgba(158, 160, 165, 1);
  padding-left: 20px;
  width: 61%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content_img {
  display: flex;
  margin-top: 30px;
  align-items: center;
}
.contImgText {
  height: 40px;
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
